
;
$(function () {
    //加载页面头部
    $(function () {
        $(".header").load("./header.html", function () {
            //隐藏头部下拉菜单
            $(".li1").find("ul").css("display", "none")
            $(".li1").hover(function () {
                $(this).find("ul").css("display", "block")
            }, function () {
                $(this).find("ul").css("display", "none")
            })
        })

        //记录id
        const data = location.search.split("?")[1].split("=")[1];
        //渲染数据到页面
        $.get(`./api/detailsinfo/${data}`).then((res) => {
            //绑定头部标题
            $(".buybox-1").find(".sp1 a").text(res[0].p_type)
            $(".buybox-1").find(".sp2 a").text(res[0].p_make)
            $(".buybox-1").find(".sp3").text(res[0].p_name)
            //绑定中图
            $(".img1").attr("src", res[0].p_mid_img)
            $(".img2").attr("src", res[0].p_mid_img)
            //绑定小图
            $(".min-imgs li img").each((index, el) => {
                $(el).attr('src', res[0].p_imgs[index]);
            });
            //绑定文本
            $(".itemmsg").find("h3").text(res[0].p_name)
            $(".itemmsg").find("#p1").text(res[0].p_deps)
            $(".itemmsg").find(".sp").find("span").text(`${res[0].p_make}品牌馆`)
            //活动价
            $(".priceBox").find(".p1").find("span").text(res[0].p_price)
            //促销信息
            $(".p2").find(".red").text((res[0].p_cxmsg))
            $(".p2").find(".redtxt").text((res[0].p_msg))
            //关注度,评价,积分
            $(".pay1").find("b").text(res[0].p_gzd)
            $(".pay2").find("b").text(res[0].p_ljpj)
            $(".pay3").find("b").text(res[0].p_jf)
            //飞入购物车图片绑定
            $("#addToCat").find("img").attr("src", res[0].p_imgs[0])
            //头部固定栏飞入购物车图片绑定
            $(".jr").find("img").attr("src", res[0].p_imgs[0])

            //立即购买
            $("#addCat").on("click", function () {
                if (localStorage.getItem("users") == null || localStorage.getItem("users") == undefined) {
                    layer.msg("请先登录")
                    return;
                }
                var sum = $("#nums").val()
                var saveobj = res[0]
                delete (saveobj.p_imgs)
                delete (saveobj.p_type)
                delete (saveobj.p_make)
                delete (saveobj.p_cxmsg)
                delete (saveobj.p_msg)
                delete (saveobj.p_gzd)
                delete (saveobj.p_ljpj)
                delete (saveobj.p_jf)
                delete (saveobj.p_deps)
                delete (saveobj.p_img_index)
                //绑定数量
                saveobj.p_number = sum
                //当前登录的id
                saveobj.u_id = JSON.parse(localStorage.getItem("users")).u_id;
                $.ajax({
                    url: "./api/addcart",
                    type: "post",
                    data: saveobj
                }).then(function (res) {
                    layer.confirm("恭喜客官添加成功,是否立即购买?", {
                        btn: ["顶不住了", "再逛逛"]
                    }, (index) => {
                        layer.close(index);
                        location = "./cart.html"
                    })
                })
            })

            //放大镜
            $(".glass").find(".min-imgs").find("li").hover(function () {
                $(this).addClass("select").siblings().removeClass("select")
                $(".big-img").find("img").attr("src", `./images/details/big${data}_${$(this).index() + 1}.png`)
            })
            var $smallArea = $(".min-imgs").find("img").width()
            var $bigArea = $(".bigimg-box").find(".img1").width()
            var $scale = $smallArea / $bigArea * 2

            $(".big-img").on("mouseenter", function () {

                $(this).find(".img1").css("opacity", "0")
                $(this).find(".img2").css("opacity", "1")
                $(".img2").on("mousemove", function (evt) {
                    var disX = evt.pageX - $smallArea
                    var disY = evt.pageY - $(".min-imgs").find("img").height()
                    $(this).css({
                        left: disX,
                        top: disY
                    })
                    $(".bigimg-box").find(".img2").css({
                        left: $scale * disX * -1,
                        top: $scale * disY * -1
                    })
                })
            }).on("mouseleave", function () {
                $(".bigimg-box").find(".img2").css("opacity", "0")
                $(".bigimg-box").find(".img1").css("opacity", "1")
            })
        })

        //加载页面底部
        //购物车里面的数量
        $.get(`./api/detailsinfo/${data}`).then((res) => {
            $(".footer").load("./bottom.html", function () {
                $(".filedbox").css("display", "none")
                //页面飞入购物车效果
                var offset = {
                    top: 200,
                    left: 1322
                };
                $(window).resize(function () {
                    offset = $("#i").offset();
                })
                $("#addToCat").click(function (event) {
                    var addcar = $(this);
                    var img = addcar.find("img").attr('src');
                    var flyer = $('<img class="u-flyer" src="' + img + '">');
                    flyer.fly({
                        start: {
                            left: event.clientX,
                            top: event.clientY
                        },
                        end: {
                            left: offset.left,
                            top: offset.top - $('body').scrollTop(),
                            width: 0,
                            height: 0
                        },
                        onEnd: function () {
                            //加入购物车后出现提示消息
                            $(".cartsbox").show();
                            //加入成功后购物车动态显示数量
                            var num = $("#nums").val()
                            var sum = num - (-$('.iteNum').text())
                            $(".gwc").find("p").text(sum)
                            $('.iteNum').text(sum)
                            var sum = $("#nums").val()
                            var saveobj = res[0]
                            delete (saveobj.p_imgs)
                            delete (saveobj.p_type)
                            delete (saveobj.p_make)
                            delete (saveobj.p_cxmsg)
                            delete (saveobj.p_msg)
                            delete (saveobj.p_gzd)
                            delete (saveobj.p_ljpj)
                            delete (saveobj.p_jf)
                            delete (saveobj.p_deps)
                            delete (saveobj.p_img_index)
                            //绑定数量
                            saveobj.p_number = sum
                            //当前登录的id
                            saveobj.u_id = JSON.parse(localStorage.getItem("users")).u_id;
                            $.ajax({
                                url: "./api/addcart",
                                type: "post",
                                data: saveobj
                            }).then(function (res) {
                                layer.msg("恭喜客官添加成功!")
                            })
                        }
                    })
                })

                //头部隐藏固定栏飞入购物车效果
                $(window).resize(function () {
                    offset = $("#i").offset();
                })
                $(".jr").click(function (event) {
                    var addcar = $(this);
                    var img = addcar.find("img").attr('src');
                    var flyer = $('<img class="u-flyer" src="' + img + '">');
                    flyer.fly({
                        start: {
                            left: event.clientX,
                            top: event.clientY
                        },
                        end: {
                            left: offset.left,
                            top: offset.top,
                            width: 0,
                            height: 0
                        },
                        onEnd: function () {
                            $(".cartsbox").show()
                            var num = $("#nums").val()
                            var sum = num - (-$('.iteNum').text())
                            $(".gwc").find("p").text(sum)
                            $('.iteNum').text(sum)
                            var sum = $("#nums").val()
                            var saveobj = res[0]
                            delete (saveobj.p_imgs)
                            delete (saveobj.p_type)
                            delete (saveobj.p_make)
                            delete (saveobj.p_cxmsg)
                            delete (saveobj.p_msg)
                            delete (saveobj.p_gzd)
                            delete (saveobj.p_ljpj)
                            delete (saveobj.p_jf)
                            delete (saveobj.p_deps)
                            delete (saveobj.p_img_index)
                            //绑定数量
                            saveobj.p_number = sum
                            //当前登录的id
                            saveobj.u_id = JSON.parse(localStorage.getItem("users")).u_id;
                            $.ajax({
                                url: "./api/addcart",
                                type: "post",
                                data: saveobj
                            }).then(function (res) {
                                layer.msg("恭喜客官添加成功!")
                            })
                        }
                    })
                })
            })
        })
    })

    //二维码
    $(".app").hover(function () {
        $(this).find(".ewm").css("display", "block")
    }, function () {
        $(this).find(".ewm").css("display", "none")
    })
    //顶部固定栏显示隐藏
    $(document).scroll(function () {
        if ($(document).scrollTop() > 1050) {
            $(".datalist-float").css("display", "block")
        } else {
            $(".datalist-float").css("display", "none")
        }
    })

    //点击按钮改变数量
    var num = parseInt($("#nums").val())
    //加
    $("#up").on("click", function () {
        num++
        $("#nums").val(num)
    })
    //减
    $("#down").on("click", function () {
        num--;
        if (num < 1) {
            num = 1;
            alert("数量不能少于1件!")
        }
        $("#nums").val(num)
    })
    //动态输入,改变后
    $("#nums").change(num, function () {
        var num = parseInt($("#nums").val())
        if (num < 1) {
            alert("数量不正确!")
            num = 1;
            $("#nums").val(num)
        }
    })


    //最近浏览商品左右焦点图
    function autoplay() {
        var left = parseInt($(".historysiled").find("ul").css("left"))
        if (left == 0) {
            $(".historysiled").find("ul").stop().animate({ left: -1080 })
        }
        if (left == -1080) {
            $(".historysiled").find("ul").stop().animate({ left: 0 })
        }
    }
    var timer = setInterval(autoplay, 3000)
    $(".historysiled").hover(function () {
        clearInterval(timer)
    }, function () {
        timer = setInterval(autoplay, 3000)
    })
    $(".history").find("#rig").on("click", function () {
        autoplay()

    })
    $(".history").find("#lef").on("click", function () {
        autoplay()
    })
    //固定栏点击效果
    $(".float-box").find(".jypj").on("click", function () {
        $(this).addClass("select").siblings().removeClass("select")
    })
    $(".float-box").find(".twxq").on("click", function () {
        $(this).addClass("select").siblings().removeClass("select")
    })

    //酒友评价
    $(".qbpj").on("click", function () {
        $("#list1").css("display", "block")
        $("#list2").css("display", "none")
        $(this).addClass("select").siblings().removeClass("select")
    })
    $(".sd").on("click", function () {
        $("#list2").css("display", "block")
        $("#list1").css("display", "none")
        $(this).addClass("select").siblings().removeClass("select")
    })

    //评价图片显示和隐藏

    $(".showbox").find("img:gt(0)").css("display", "none")
    var smallIndex = 0;
    var bigIndex = 0;
    var length = $(".pjimglist").find("li")

    function play() {
        smallIndex++;
        if (smallIndex == length) {
            smallIndex = length
        }
        $(".pjimglist").find("li").eq(smallIndex).addClass("select").siblings().removeClass("select")
        bigIndex++;
        if (bigIndex == length) {
            bigIndex = length
        }
        $(".showbox").find("img").eq(bigIndex).css("display", "block").siblings("img").css("display", "none")
    }
    $(".pjimglist").find("li").on("click", function () {
        $(this).parent().siblings(".showbox").css("display", "block")
        $(this).addClass("select").siblings().removeClass("select")
        smallIndex = bigIndex = $(this).index() - 1
        if (smallIndex == -1) {
            $(".showbox").find(".qian").css("display", "none")
            $(".showbox").find(".next").css("display", "block")
        }
        if (smallIndex == 0) {
            $(".showbox").find(".qian").css("display", "block")
            $(".showbox").find(".next").css("display", "none")
        }
        play()
    })

    $(".showbox").find(".next").on("click", function () {
        if (smallIndex == -1) {
            $(".showbox").find(".qian").css("display", "none")
            $(".showbox").find(".next").css("display", "block")
        }
        if (smallIndex == 0) {
            $(".showbox").find(".qian").css("display", "block")
            $(".showbox").find(".next").css("display", "none")
        }
        play()
    })
    $(".showbox").find(".qian").on("click", function () {
        bigIndex = bigIndex - 2;
        smallIndex = smallIndex - 2;
        if (bigIndex == -1) {
            $(".showbox").find(".qian").css("display", "block")
            $(".showbox").find(".next").css("display", "none")
        }
        if (smallIndex == -1) {
            $(".showbox").find(".qian").css("display", "none")
            $(".showbox").find(".next").css("display", "block")
        }
        play()
    })
    $(".showbox").find("img").on("click", function () {
        $(".showbox").css("display", "none")
        $(this).parent().siblings(".pjimglist").find("li").removeClass("select")
    })
})